<template>
  <button class="relative overflow-hidden px-4 flex items-center bg-gray-200 dark:bg-dark-surface dark:text-dark-onSurfaceSecondary rounded-full h-10 outline-none text-light-onSurfacePrimary dark:text-dark-onSurfacePrimary transition-colors duration-300 ease-linear" @click="setCurrentTheme">
    <span class="relative mr-2 overflow-hidden inline-block w-5 h-5 flex items-center justify-center">
      <MoonIcon class="w-5 h-5 absolute" :class="$colorMode.preference === 'dark' ? 'show' : 'hide'"/>
      <SystemIcon class="w-5 h-5 absolute" :class="$colorMode.preference === 'system' ? 'show' : 'hide'"/>
      <SunIcon class="w-5 h-5 absolute" :class="$colorMode.preference === 'light' ? 'show' : 'hide'"/>
    </span>
    <transition name="from-bottom-to-bottom" mode="out-in">
      <span v-if="$colorMode.preference === 'dark'" key="dark" class="inline-block font-medium mr-1">Dark</span>
      <span v-if="$colorMode.preference === 'system'" key="system" class="inline-block font-medium mr-1">System</span>
      <span v-else-if="$colorMode.preference === 'light'" key="light" class="inline-block font-medium mr-1">Light</span>
    </transition>
  </button>
</template>

<script>
import SunIcon from '@/assets/icons/sun.svg?inline'
import MoonIcon from '@/assets/icons/moon.svg?inline'
import SystemIcon from '@/assets/icons/system.svg?inline'

export default {
  components: {
    SunIcon,
    MoonIcon,
    SystemIcon
  },
  props: [],
  data () {
    return {
      //
    }
  },
  methods: {
    setCurrentTheme () {
      this.$colorMode.preference = this.$colorMode.preference === 'system' ? 'light' : this.$colorMode.preference === 'light' ? 'dark' : 'system'
    }
  }
}
</script>

<style lang="scss" scoped>
button {
  outline: none;
}

.show {
  animation: show-icon 300ms forwards;
}

.hide {
  animation: hide-icon 300ms forwards;
}

@keyframes show-icon {
  from {
    opacity: 0;
    transform: scaleY(0);
    // transform: translate3d(-100%, 10px, 0) rotate(-180deg) scale3d(0.5, 0.5, 0.5);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    // transform: translate3d(0, 0, 0) rotate(0) scale3d(1, 1, 1);
  }
}

@keyframes hide-icon {
  from {
    opacity: 1;
    transform: scaleY(1);
    // transform: translate3d(0, 0, 0) rotate(0) scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scaleY(0);
    // transform:  translate3d(100%, 10px, 0) rotate(180deg) scale3d(0.5, 0.5, 0.5);
  }
}

.from-bottom-to-bottom-enter-active {
  opacity: 1;
  transition: opacity 100ms, transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.from-bottom-to-bottom-leave-active {
  opacity: 1;
  transition: opacity 100ms, transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.from-bottom-to-bottom-enter {
  opacity: 0;
  transform: scaleY(0);
}

.from-bottom-to-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
</style>
